<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../img/bike.ico">
  <title>encrypt-js</title>
  <!-- Bootstrap core CSS -->
  <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="../dist/css/bootstrap-grid.css" rel="stylesheet">
  <link href="../dist/css/bootstrap-reboot.css" rel="stylesheet">
  <link href="../dist/zaddcss/zaddindex.css" rel="stylesheet">
  <style>
    #serverAddr {
      width: 27%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='okey'] {
      width: 10%;
      border-radius: 5px;
      border: solid rgb(227, 227, 227);
    }

    input[name='otext'] {
      width: 80%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='result'] {
      width: 80%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceNum'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceSN'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceOriNum'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    .myRealContext {
      border: solid;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
    }

    label {
      width: 100%;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
  <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  <div class="dropdown-menu" aria-labelledby="dropdown06">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
  <form class="form-inline my-2 my-md-0">
    <label>
      <input class="form-control" type="text" placeholder="Search">
    </label>
  </form>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    QA<span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExample01">
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
  </div>
</nav>
<main role="main">
  <section class="jumbotron text-center">
    <div class="container">
      <h3 class="jumbotron-heading">常用查询</h3>
    </div>
  </section>
  <div class="album py-3 bg-light">
    <div class="container">
      <div class="container-fluid" style="padding-bottom: initial">
        <div class="myRealContext">
          <p>
            <label>
              密钥：
              <input name="okey" type="password" value="abc" placeholder="abc" aria-placeholder="abc">
            </label><br>
            <label>
              文字：
              <input name="otext" type="text" value="1" placeholder="1" aria-placeholder="1">
            </label><br>
            结果：<input name="result" type="text" value="" placeholder="结果" aria-placeholder="结果" title="结果">
          </p>
          <p>
            <input name="gen" type="button" class="btn btn-sm btn-primary" value="加密信息">
            <input name="dec" type="button" class="btn btn-sm btn-primary" value="解密信息">
          </p>
        </div>
        <!--联网查询 账号及设备-->
        <div class="myRealContext">
          <p>
            <label for="serverAddr">其它未录入地址（功能未完成）：</label>
            <input name="serverAddr" id="serverAddr" class type="text" placeholder="1.singbon.com:81" title="服务器地址">
          </p>
          <p>
            <label for="serverAddrList">服务器地址：</label>
            <select id="serverAddrList" style="width: 41%">
              <option>1.singbon.com:81</option>
              <option>a2.4000063966.com:81</option>
              <option>a3c.4000063966.com</option>
              <option>a4c.4000063966.com</option>
              <option disabled>cdz.4000063966.com:81</option>
            </select>
          </p>
          <p>
            <input name="getpwd" type="button" class="btn btn-sm btn-primary" value="功能无效">
            <input name="loadpwd" type="button" class="btn btn-sm btn-primary" value="获取密码" title="打开新的页面">
          </p>
          <p>
            <label style="width: 100%">
              设备号：
              <input name="deviceNum" type="text" value="1" placeholder="1" aria-placeholder="1">
            </label>
            <label style="width: 100%">
              序列号：
              <input name="deviceSN" type="text" value="01" placeholder="" aria-placeholder="">
            </label>
            <label style="width: 100%">
              原号码：
              <input name="deviceOriNum" type="text" value="1" placeholder="1" aria-placeholder="1">
            </label>
          </p>
          <p>
            <input name="loadDeviceInfo" type="button" class="btn btn-sm btn-primary" value="查询设备">
            <input name="transToHex" type="button" class="btn btn-sm btn-primary" value="转换格式">
          </p>
        </div>
        <!-- IP 复制 -->
        <div class="myRealContext">
          <!--server1-->
          1服务器IP:
          <a id="serverIcJ1Ip" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            122.114.33.8
          </a>
          URL:
          <a id="serverIcJ1Url" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            1.singbon.81
          </a>
          <br>
          <!--server2-->
          2服务器IP:
          <a id="serverIcA2Ip" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            39.108.61.11
          </a>
          URL:
          <a id="serverIcA2Url" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            a2.4000063966.com:81
          </a>
          <!--server3-->
          <br>
          3服务器IP:
          <a id="serverIcA3Ip" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            39.108.227.18
          </a>
          URL:
          <a id="serverIcA3Url" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            a3c.4000063966.com
          </a>
          <!--server4-->
          <br>
          4服务器IP:
          <a id="serverIcA4Ip" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            47.107.100.127
          </a>
          URL:
          <a id="serverIcA4Url" class="click-copy-ip-url" href="javascript:void(0)" title="点击复制 Σ( ° △ °|||)︴" data-toggle="tooltip" data-placement="top">
            a4c.4000063966.com
          </a>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="text-muted" style="margin-top: -10px">
  <div class="container">
    <p class="float-right">
      <a href="#">返回最上</a>
    </p>
    <p>示例页面 &copy; Bootstrap!</p>
    <p>
      <a href="https://github.com/zghnzch">访问我们的主页</a>
    </p>
  </div>
</footer>
<script src="../dist/zaddjs/jquery/jquery-3.3.1.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="../dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/zaddjs/encrypt/src/core.js"></script>
<script src="../dist/zaddjs/encrypt/src/cipher-core.js"></script>
<script src="../dist/zaddjs/encrypt/src/tripledes.js"></script>
<script src="../dist/zaddjs/encrypt/src/mode-ecb.js"></script>
<script src="../dist/zaddjs/copyContent/copyContent.js"></script>
<!--方法区-->
<script type="text/javascript">
  //加密的私钥 let 和 Var 有什么区别？
  // DES  加密
  function encryptByDES(key, message) {
    key = $('input[name=okey]').val();
    //把私钥转换成16进制的字符串
    let keyHex = CryptoJS.enc.Utf8.parse(key);
    //模式为ECB padding为Pkcs7
    let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    //加密出来是一个16进制的字符串
    return encrypted.ciphertext.toString();
  }

  //DES  ECB模式   解密
  function decryptByDESModeEBC(key, ciphertext) {
    //把私钥转换成16进制的字符串
    let keyHex = CryptoJS.enc.Utf8.parse(key);
    //把需要解密的数据从16进制字符串转换成字符byte数组
    let decrypted = CryptoJS.DES.decrypt({
      ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
    }, keyHex, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    //以utf-8的形式输出解密过后内容
    return decrypted.toString(CryptoJS.enc.Utf8);
  }
</script>
<!--jquery 初始化-->
<script type="text/javascript">
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
    // 元素定义
    // region 元素定义
    // region input标签
    //密钥
    let eleInputNameOkey = $('input[name=\'okey\']');
    //需要处理的文字
    let eleInputNameOtext = $('input[name=\'otext\']');
    //处理结果
    let eleInputNameResult = $('input[name=\'result\']');
    //设备号码
    let eleInputNameDeviceNum = $('input[name=\'deviceNum\']');
    //设备SN
    let eleInputNameDeviceSN = $('input[name=\'deviceSN\']');
    //原号码
    let eleInputNameDeviceOriNum = $('input[name=\'deviceOriNum\']');
    // endregion输入框
    // region 按钮
    // 按钮
    //查询设备所属信息
    let eleBtnLoadDeviceInfo = $('input[name=\'loadDeviceInfo\']');
    //加密
    let eleBtnGen = $('input[name=\'gen\']');
    //解密
    let eleBtndec = $('input[name=\'dec\']');
    //直接获取密码
    let eleBtnGetpwd = $('input[name=\'getpwd\']');
    //新页面获取密码
    let eleBtnLoadpwd = $('input[name=\'loadpwd\']');
    //　设备号码转换十六进制
    let eleBtnTransToHex = $('input[name=\'transToHex\']');
    // endregion 按钮
    // region 段落文字
    /*段落文字---------------------------------*/
    // let elePIdSlsServer = $('#slsServer');
    // let elePIdCdzServer = $('#cdzServer');
    // endregion 段落文字
    // region a 标签
    /*a 标签---------------------------------*/
    let eleAIdSlsServer = $('#aslsServer');
    let eleAIdCdzServer = $('#acdzServer');
    // endregion a 标签
    // region input标签
    let eleSelectIdserverAddrList = $('#serverAddrList');
    // endregion input标签
    // endregion 元素定义
    // 元素click
    // region 元素click
    // btn 加密
    eleBtnGen.click(function () {
      //需要加密的内容
      let key = eleInputNameOkey.val();
      let otext = eleInputNameOtext.val();
      let enResult = encryptByDES(key, otext);
      eleInputNameResult.val(enResult);
    });
    //解密
    eleBtndec.click(function () {
      let key = $('input[name=okey]').val();
      let otext = $('input[name=\'otext\']').val();
      let deResult = decryptByDESModeEBC(key, otext);
      eleInputNameResult.val(deResult);
    });
    // btn 获取密码
    eleBtnGetpwd.click(function () {
      let eleSelected = $('#serverAddrList option:selected');
      let selectedval = eleSelected.val();
    });
    // btn 新页面获取密码
    eleBtnLoadpwd.click(function () {
      //需要加密的内容
      let key = eleInputNameOkey.val();
      let otext = eleInputNameOtext.val();
      let enResult = encryptByDES(key, otext);
      let url = 'http' + '://' + $('#serverAddrList option:selected').val();
      url = url + '/s/suf.do?s=' + enResult;
      window.open(url);
    });
    // btn 新页面获取设备信息
    eleBtnLoadDeviceInfo.click(function () {
      let valDeviceNum = eleInputNameDeviceNum.val();
      let url = 'http' + '://' + $('#serverAddrList option:selected').val();
      // url = url + "/s/suf.do?s=" + enResult;
      url = url + '/s/s.do?s=' + valDeviceNum;
      window.open(url);
    });
    // 点击复制 click-copy-ip-url
    $('.click-copy-ip-url').click(function () {
      let targetId = $(this).attr('id');
      console.info('targetId:', targetId, typeof targetId);
      let copyContext = $(this).text();
      console.info('copyContext:', copyContext.replace('\n','').trim(), typeof copyContext);
      let isCopySuccess = copy(targetId, 'innerText');
      console.info('isCopySuccess:', isCopySuccess, typeof isCopySuccess);
      let tooltipText = copyContext;
      if (isCopySuccess === 1) {
        tooltipText += '复制成功';
      }
      else if (isCopySuccess === 0) {
        tooltipText += '复制失败';
      }
      else {
        tooltipText += '复制方法异常';
      }
      $(this).attr('data-original-title', tooltipText).tooltip('update').tooltip('show');
    });
    //设备号码转换十六进制
    eleBtnTransToHex.click(function () {
      let valDeviceNum = eleInputNameDeviceNum.val();
      let c = parseInt(valDeviceNum).toString(16).toUpperCase()
      while (c.length < 32) {
        c = '0' + c;
      }
      eleInputNameDeviceSN.val(c);
    });
    /*元素监听 on---------------------------------*/
    //
    eleInputNameDeviceNum.on('input', function () {
      let valDeviceNum = eleInputNameDeviceNum.val();
      let c = parseInt(valDeviceNum).toString(16).toUpperCase();
      while (c.length < 32) {
        c = '0' + c;
      }
      eleInputNameDeviceSN.val(c);
    });
    //
    eleInputNameDeviceSN.bind('input', function () {
      let valDeviceSN = eleInputNameDeviceSN.val();
      const ten = parseInt(valDeviceSN, 16)
      eleInputNameDeviceOriNum.val(ten);
    });
    //
    eleInputNameDeviceSN.on('mouseover', function () {
      let valDeviceSN = eleInputNameDeviceSN.val();
      const ten = parseInt(valDeviceSN, 16)
      eleInputNameDeviceOriNum.val(ten);
    });
    // endregion 元素click
  });
</script>
</body>
</html>
